*{
    padding:0;
    margin: 0;
    list-style: none;
    box-sizing: border-box;
    text-decoration: none;
}

html,body{
    width: 100%;
    height: 100%;
    background: #DCDCDC;
}

body{
    padding-top: 80px;
}

.box{
    width: 500px;
    height: 450px;
    border:1px solid #000;
    margin: 0 auto;
    padding-top: 30px;
    position: relative;
}

.rubbishBox{
    width: 150px;
    height: 100px;
    background: red;
    color: #FFF;
    font-size: 26px;
    text-align: center;
    font-family: "楷体";
    font-weight: 900;
    margin: 0 auto;
    padding-top: 15px;
}
.count{
    font-size: 36px;
    color: green;
}

.box > p {
    /* 6个  两行三列 */
    /* 498 - 15 * 6 = 408 / 3 = 136 */
    width: 136px;
    height: 45px;
    background: #666;
    color: #FFF;
    line-height: 45px;
    text-align: center;
    position: absolute;
    cursor:move;
}
/* 15 + 136 + 30 =  */
/* 181 + 166 =  */
.box > p:nth-of-type(1){ left: 15px;  top: 200px; }
.box > p:nth-of-type(2){ left: 181px;  top: 200px; }
.box > p:nth-of-type(3){ left: 347px;  top: 200px; }
.box > p:nth-of-type(4){ left: 15px;  top: 290px; }
.box > p:nth-of-type(5){ left: 181px;  top: 290px; }
.box > p:nth-of-type(6){ left: 347px;  top: 290px; }
